<template>
	<div id="core-btn">
		<!-- 动态class里面先一个默认样式class名，再一个prop传入的类名，传入则覆盖默认的 -->
		<button :class="[btnClass,cname]" class="bb1">
			<slot></slot>
		</button>
	</div>
</template>

<script>
	export default {
		props:{
			cname:{
				type:String,
				default:''
			}
		},
		data(){
			return {
				btnClass:"btn"
			}
		}
	}
</script>

<style lang="scss">
	// 不管是插入scss变量，还是@include引入@mixin，都需要先@import引入css模块
	@import "~@/assets/css/main.scss";  //vue的style中 ~@/ 代表src目录
	.btn{
		@include btn;
	}	
</style>
